
import React from 'react';
import { memo, useCallback } from 'react';
import useControlOptions from '../../hooks/useControlOptions';
import { Form, Input, Radio } from 'antd';

import { CodeProps } from './Code';

const FormItem = Form.Item;


export default memo(
  () => {

    const { options, changeFormItemProps, changeControlProps } = useControlOptions<CodeProps>('codeProps');

    const onChangeName = useCallback((e) => changeFormItemProps('name', e.target.value), [changeFormItemProps]);
    const onChangeLabel = useCallback((e) => changeFormItemProps('label', e.target.value), [changeFormItemProps]);

    const formItemProps = options.formItemProps

    const onChangeWidth = useCallback(
      (e) => {
        changeFormItemProps('style', { ...formItemProps?.style, width: e.target.value });
      },
      [changeFormItemProps, formItemProps]
    );

    const onChangeControlProps = useCallback((key: string | any, value?: string) =>
      changeControlProps(
        'codeProps',
        typeof key === 'string' ? { ...options.codeProps, [key]: value } : { ...options.codeProps, ...key },
        true
      ), [changeControlProps, options.codeProps])

    return (
      <>
        <FormItem label="数据绑定ID" tooltip="数据存储的名称/英文/必填">
          <Input onChange={onChangeName} value={formItemProps?.name as string} />
        </FormItem>

        <FormItem label="标题">
          <Input placeholder="请输入" onChange={onChangeLabel} value={formItemProps?.label as string} />
        </FormItem>


        <FormItem label="字段占比">
          <Radio.Group value={formItemProps?.style?.width} onChange={onChangeWidth}>
            <Radio.Button value='25%'>25%</Radio.Button>
            <Radio.Button value='50%'>50%</Radio.Button>
            <Radio.Button value='75%'>75%</Radio.Button>
            <Radio.Button value='100%'>100%</Radio.Button>
          </Radio.Group>
        </FormItem>

        <FormItem label="类型">
          <Radio.Group value={options.codeProps?.type as string} onChange={(e) => onChangeControlProps?.('type', e.target.value)}>
            <Radio.Button value='barCode'>条形码</Radio.Button>
            <Radio.Button value='qrCode'>二维码</Radio.Button>
          </Radio.Group>
        </FormItem>


        <FormItem label="默认值">
          <Input placeholder="请输入默认值" onChange={(e) => onChangeControlProps?.('initialValue', e.target.value)} value={options.codeProps?.initialValue as string} />
        </FormItem>
      </>
    );
  }
);
